<template>
    <div class="divFull divChat">
        <div class="panVideo">
            <div class="mainBox">
                <video playsinline autoplay muted style="width:100%;height:100%; background-color:#000"></video>
                <ul class="lstVideos">
                    <li class=" self">
                        <div class="videoContainer">
                            <video playsinline autoplay muted id="lv"></video>
                            <div class="videoTitle">名字</div>
                            <div class="videoTools">
                                <div class="acItem">
                                    <i class="fa fa-volume-up"></i> 
                                </div>
                                <div class="acItem">
                                    <i class="fa fa-volume-up"></i>
                                    <i class="fa fa-ban fa-stack-2x text-danger"></i>
                                </div>
                                <div class="acItem">
                                    <i class="fa fa-video-camera"></i>
                                </div>
                                <div class="acItem">
                                    <i class="fa fa-video-camera"></i>
                                    <i class="fa fa-ban fa-stack-2x text-danger"></i>
                                </div>
                                <div class="acItem"><i class="fa fa-tv"></i></div>
                            </div>
                        </div>
                    </li>  
                    <li class=""
                        v-for = "(item , index) in seatCodes"
                        :key="index"
                    >
                        <div class="videoContainer">
                            <video playsinline autoplay muted :id="'rv-'+item"></video>
                            <div class="videoTitle">{{item}}</div>
                            <div class="videoTools">
                                <div class="acItem"><i class="fa fa-camera"></i></div>
                                <div class="acItem"><i class="fa fa-tv"></i></div>
                            </div>
                        </div>
                    </li>   
                </ul>
            </div> 
        </div>
        <div class="panText">
            <div class="lstTools">
                <div class="title">
                    <i class="fa fa-commenting"></i> 聊天记录
                </div>
            </div>
            <kmsview style="height:200px"></kmsview>
            <div class="msgs">
                <ul class="lstMsg">
                    <div class="msgItem">
                        <div class="msgData">
                            <div class="msgUser"></div>
                            <div class="msgContent"></div>
                        </div>
                    </div>
                </ul>
            </div>
            <div class="msgSend">
                <div class="divInput">
                    <el-input></el-input>
                </div>
                <el-button><i class="fa fa-mail-forward"></i> send</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import kmsview from "../common/kmsview.vue";
    export default {
        mounted() {
            var me = this;
            try {
                me.settings.channelCode = me.$route.query.c||"chat";
                me.settings.mySeatCode = me.$route.query.s|| me.kmsBridge.config.clientId;
                console.log(me.settings);
                me.$nextTick().then(_=>{
                //    return me.kmsBridge.clearObjs();
                //}).then(_=>{
                    return me.init();
                }).then(_=>{
                    //me.startView();
                });
            } catch (error) {
                console.log(error);
            }
        },
        data() {
            return {
                settings:{
                    channelCode:"",
                    mySeatCode:""
                },
                channel: null,
                seatCodes:['s01','s02','s03','s04']
            };
        },
        components:{
            kmsview
        },
        methods: {
            init() {
                var me = this;
                return new Promise((success , faild)=>{
                    try {
                        var defaultSettings = {
                            channelCode: me.settings.channelCode,
                            seatCodes: [me.settings.mySeatCode],
                            views: [{
                                code: 'pusher-'+me.settings.mySeatCode,
                                viewType: 's',
                                video: document.getElementById("lv"),
                                defaultSeatCode: me.settings.mySeatCode,
                                cameraIndex: 0
                            }]
                        };
                        me.seatCodes.forEach(s=>{
                            defaultSettings.views.push({
                                code: 'puller-'+s,
                                viewType: 'r',
                                video: document.getElementById("rv-"+s),
                                defaultSeatCode: s,
                                cameraIndex: 0
                            });
                        })
                        var pushView = null;
                        me.kmsBridge.getKmsClient().then(_=>{
                            return me.kmsBridge.createChannel(defaultSettings);
                        }).then(ch=>{
                            me.channel = ch;
                            pushView = ch.views['pusher-'+ me.settings.mySeatCode];    
                            return pushView.open();                        
                        }).then(_=>{
                            return pushView.push(me.settings.mySeatCode);                       
                        }).then(_=>{
                            var index =0;
                            var playItems =()=>{
                                if( index<me.seatCodes.length){
                                    var seatCode = me.seatCodes[index];
                                    var pullerView = me.channel.views['puller-'+ seatCode]; 
                                    pullerView.open().then(_=>{
                                        return pullerView.play(seatCode);
                                    }).then(_=>{
                                        index++;
                                        playItems();
                                    })
                                }
                                else{
                                    success();
                                }
                            };
                            playItems();
                        });
                    } catch (error) {
                        console.log(error);
                        success();
                    }
                });
            },
            updateViews() {
                var me = this;
                return new Promise((success , faild)=>{
                    try {
                        me.kmsBridge.getChannel(me.settings.channelCode).then( ch=>{ 
                            console.log(ch);
                            console.log(me.channel);
                            me.seatCodes = Object.keys(ch.seats);
                            me.$nextTick().then(_=>{
                                var index =0;
                                var loadPeer =()=>{
                                    if( index< me.seatCodes.length){
                                        var seatCode = me.seatCodes[index];
                                        var view = me.channel.views['puller-'+ seatCode];;
                                        if(view && view!=null){
                                            index++;
                                            loadPeer();
                                        }   
                                        else{
                                            //viewCode, viewType, defaultCameraIndex, playSeatCode
                                            var video = document.getElementById('rv-'+seatCode);
                                            me.channel.createView('puller-'+seatCode , 'r' , video , 0 , seatCode).then(_peer=>{
                                                _peer.play(seatCode);
                                                index++;
                                                loadPeer();
                                            });
                                        }
                                    }
                                    else{
                                        success();
                                    }
                                }
                                loadPeer();
                            })
                        })
                    } catch (error) {
                        console.log(error);
                        success();
                    }
                });
            },
            startView() {
                var me = this;
                try {
                    me.updateViews().then(_=>{
                        window.setTimeout(()=>{
                            me.startView();
                        }, 5000);
                    })
                    
                } catch (error) {
                    console.log(error);
                }
            },
        },
        
    }
</script>
<style scoped lang="less">
@import '../common/common.less';
</style>
<style lang="less" scoped>
    .divFull{
        height: 100%;
        width: 100%;
        position:relative ;
    }
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .divChat{
        display: flex;
        .panVideo{
            flex:1;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative; 
            .mainBox{
                flex:1;
                position: relative; 

                ul.lstVideos{
                    position: absolute;
                    left: 50%;
                    bottom: 20px;
                    transform: translate(-50%);
                    display: flex;
                    li{
                        position: relative;
                        width: 180px; 
                        margin:0 5px;
                    }
                }
            }
        }
        .panText{
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .lstTools{
                padding: 10px 15px;
            }
            .msgs{
                flex:1;
                background-color: #fff;
                padding: 5px;
            }
            .msgSend{
                padding: 5px;
                display: flex;
                justify-content: space-between;
                .divInput{
                    flex: 1;
                    ::v-deep .el-input{
                        width: 100%;
                    }
                }
            }
        }
    }
</style>